import React from 'react'
import {SearchBar,Space,Swiper} from "antd-mobile"
import { Grid } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import request from "../../api/request";

function Home() {
    const navigate=useNavigate();
  return (
    <div>
      <SearchBar placeholder='搜索目的地/景点' onFocus={()=>navigate('/seach')}></SearchBar>
      <Grid columns={4} style={{marginTop:"10px"}}>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"green", color:"#fff"}}>亲子游</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"skyblue", color:"#fff"}}>文化游</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"orange", color:"#fff"}}>温泉游</div>
          </Grid.Item>
          <Grid.Item>
            <div onClick={()=>navigate('/listcity')} className={'grid-demo-item-block'} style={{background:"skyblue", color:"#fff"}}>周边游</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"slateblue", color:"#fff"}}>旅游地图</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"orange", color:"#fff"}}>酒店民宿</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"skyblue", color:"#fff"}}>汽车票</div>
          </Grid.Item>
          <Grid.Item>
            <div className={'grid-demo-item-block'} style={{background:"coral", color:"#fff"}}>飞机票</div>
          </Grid.Item>
        </Grid>
        <div>
            <Swiper loop autoplay>
                <Swiper.Item>
                    <img src="../public/i1_02.jpg" alt="" style={{width:'100vw', height:"30vh"}}/>
                </Swiper.Item>
                <Swiper.Item>
                    <img src="../public/i2_01.jpg" alt="" style={{width:'100vw', height:"30vh"}}/>
                </Swiper.Item>
                <Swiper.Item>
                    <img src="../public/i3_02.jpg" alt="" style={{width:'100vw', height:"30vh"}}/>
                </Swiper.Item>
                <Swiper.Item>
                    <img src="../public/i4_01.jpg" alt="" style={{width:'100vw', height:"30vh"}}/>
                </Swiper.Item>
            </Swiper>
        </div>
    </div>
  )
}

export default Home
